.m-l-5 {
  margin-left: 5px;
}

.m-r-5 {
  margin-right: 5px;
}

.m-t-5 {
  margin-top: 5px;
}

.m-b-5 {
  margin-bottom: 5px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-t-10 {
  margin-top: 10px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.flex-row {
  display: flex;
  align-items: center;
}

@mixin flex-row {
  display: flex;
  align-items: center;
}

.flex-center {
  @include flex-row;
  justify-content: center;
}

.flex-between {
  @include flex-row;
  justify-content: space-between;
}

.flex-around {
  @include flex-row;
  justify-content: space-around;
}

.flex-end {
  @include flex-row;
  justify-content: flex-end;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.justify-end {
  justify-content: flex-end;
}

.align-end {
  align-items: flex-end;
}

.side-bars {
  position: absolute;
  right: 19.5%;
  top: 102px;
  z-index: 12;
  display: flex;
  flex-direction: column;

  .btn {
    background: url('~@/assets/img/btnBg.png') no-repeat;
    width: 113px !important;
    height: 30px;
    line-height: 32px;
    background-size: 100% 100%;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;
  }
}

.page-wrap {
  height: 80px;
  text-align: center;
}

.dialog-wrap-com {
  color: #ffffff;
  width: 100%;
  height: 100%;

  .dialog-title {
    height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .closeImg {
    width: 80px;
    height: 26px;
    cursor: pointer;
  }

  .address {
    width: 15px;
    height: 20px;
  }

  .dialog-body {
    margin-top: 30px;
    height: calc(100% - 100px);
    overflow-y: auto;

    .el-form {
      min-height: 90%;
    }
  }

  .el-icon-location-outline {
    cursor: pointer;
  }
}

%message-shared {
  content: '';
  // display: inline-block;
  width: 10px;
  height: 10px;
  float: left;
  border-radius: 50%;
  margin: 12px 10px 0 10px !important;
}

%rainfall-shared {
  content: '';
  width: 20px;
  height: 20px;
  float: left;
  margin: 10px 10px 0 10px !important;
  background-size: 100% 100%;
}

// 预报降雨信息尾部的箭头上
%rainfallTailArrows-Up {
  content: '';
  display: block;
  width: 12px;
  height: 8px;
  background: url('~@/assets/newimg/arrowsDown.png') center no-repeat;
  background-size: 100% 100%;
}

// 预报降雨信息尾部的箭下
%rainfallTailArrows-Down {
  content: '';
  display: block;
  width: 12px;
  height: 8px;
  background: url('~@/assets/newimg/arrowsDown.png') center no-repeat;
  background-size: 100% 100%;
  transform: rotate(90deg);
}

.tab {
  display: flex;
  width: 100%;
  justify-content: left;
  align-items: center;
  background: url(../newimg/taBackground.png) no-repeat;
  background-size: 100% 100%;

  .tabTit {
    line-height: 34px;
    height: 34px;
    // width: 33%;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    justify-content: center;
    align-items: center;
    margin: 0 2px;
    padding: 0 20px;
    line-height: 32px;
    height: 32px;
    font-size: 16px;
    font-weight: bold;
    color: #C5E3E9;
  }

  .activeTab {
    color: #FFFFFF;
    background: url(../newimg/arrowsUp.png) no-repeat bottom center;
    background-size: 17% 14%;
    font-size: 16px;
  }
}
.dialogTab{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  .tabTit {
    // width: 33%;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    justify-content: center;
    align-items: center;
    margin: 0px 8px;
    padding: 7px 33px;
    font-size: 16px;
    font-weight: bold;
    color: #96ABD5;
    background: url(../dialog/dialogTab.png) no-repeat;
    background-size: 100% 100%;
  }

  .activeTab {
    color: #FFFFFF;
    background: url(../dialog/dialogTabActive.png) no-repeat bottom center;
    background-size: 100% 100%;
    font-size: 16px;
  }
}



.titleList,
.stationLst ul li {
  display: flex;
  justify-content: space-around;
  // border: 2px solid #111f52;
  // background: #0a065a;
  background: rgba(0, 43, 77, 0.78);
  border: 1px solid rgba(3, 34, 55, 0.61);

  padding: 5px;
  align-items: center;
  cursor: pointer;

  span {
    display: inline-block;
    //color: #ffffff;
    color: #00FEFE;
    text-align: center;
    width: 25%;
    font-size: 14px;
    line-height: 20px;
  }
}

.titleList {
  //background: rgba(14, 81, 133, 0.65);
  border: 0;
  //border-bottom: 1px solid rgba(3, 34, 55, 0.61);
  background: rgba(0, 150, 255, 0.3);

}

.stationLst ul li {
  min-height: 1.5rem;
  background: rgba(0, 150, 255, 0.3);

}

.stationLst,
.stationLst .stationLstul {
  li {
    span {
      color: #fff;
    }
  }

  .tableBgList {
    // background: rgba(24, 82, 127, 0.78) !important;
    // box-shadow: inset 0px 0px 15px 10px rgba(24, 82, 127, 0.8);
    // border-color: #75b0fc !important;
    background: linear-gradient(0deg, #002E83 0%, rgba(0, 46, 131, 0.6) 100%);
    border: 1px solid #00DEFF;
    background: rgba(0, 150, 255, 0.6);

  }

  li:hover {
    border: 1px solid #00DEFF;
    background: rgba(0, 150, 255, 0.6);

  }

}

.btnCjfa {
  // padding: 2px 15px;
  // line-height: 40px;
  // text-indent: 0;
  // font-size: 12px;
  // background: url(../newimg/btnPlay.png) no-repeat top center;
  // background-size: 100% 100%;
  position: relative;
  top: -5px;
  cursor: pointer;

  i {
    display: inline;
    margin-right: 3px;
  }

  // &:hover {
  //   background: url(../newimg/btnCjfaHover.png) no-repeat top center;
  //   background-size: 100% 100%;
  // }
}

.Statistvics_top {
  background: url(../newimg/sanjiao.png) no-repeat;
  color: #fff;
  height: 40px;
  line-height: 40px;
  text-indent: 20px;
  background-position: left center;
}

.Statistvics_topActive {
  background: url(../newimg/sanjiaoRight.png) no-repeat;
  color: #fff;
  height: 40px;
  line-height: 40px;
  text-indent: 20px;
  background-position: left center;
}

.noDataList {
  height: 30px;
  line-height: 30px;
  background: #ccc;
  color: #333;
  text-align: center;
}

.noDataLists {
  height: 100%;
  line-height: 100%;  
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  background: url(../newimg/notAvailableData.png)  no-repeat;
  //background-position: center 40%;
  background-position: center calc(32% - 16px);
  background-size: auto;
  padding-top: 64%;
}

.padd5 {
  padding: 5px;
}



.StatistvicsColor0 {
  color: #ccc !important;
}

.StatistvicsColor1 {
  color: #a3f78b !important;
}

.StatistvicsColor2 {
  color: #47c046 !important;
}

.StatistvicsColor3 {
  color: #5ab4fe !important;
}

.StatistvicsColor4 {
  color: #3f34ff !important;
}

.el-collapse-item__header {
  display: inline-block !important;
  width: 100%;
}

.StatistvicsColor5 {
  color: #fe09ff !important;
}

.StatistvicsColor6 {
  color: #fe0000 !important;
}

.colorLevel6 {
  .el-collapse-item__header {
    &::after {
      @extend %rainfall-shared;
      background: url('~@/assets/newimg/rainfallLeve6.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.colorLevel5 {
  .el-collapse-item__header {
    &::after {
      @extend %rainfall-shared;
      background: url('~@/assets/newimg/rainfallLeve5.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.colorLevel4 {
  .el-collapse-item__header {
    &::after {
      @extend %rainfall-shared;
      background: url('~@/assets/newimg/rainfallLeve4.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.colorLevel3 {
  .el-collapse-item__header {
    &::after {
      @extend %rainfall-shared;
      background: url('~@/assets/newimg/rainfallLeve3.png') no-repeat;
      background-size: 100% 100%;

    }
  }
}

.colorLevel2 {
  .el-collapse-item__header {
    &::after {
      @extend %rainfall-shared;
      background: url('~@/assets/newimg/rainfallLeve2.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.colorLevel1 {
  .el-collapse-item__header {
    &::after {
      @extend %rainfall-shared;
      background: url('~@/assets/newimg/rainfallLeve1.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}

.colorLevel0 {
  .el-collapse-item__header {
    &::after {
      @extend %rainfall-shared;
      background: url('~@/assets/newimg/rainfallLeve0.png') top center no-repeat;
      background-size: 100% 70%;
    }
  }
}

.colorLevel0,
.colorLevel1,
.colorLevel2,
.colorLevel3,
.colorLevel4,
.colorLevel5,
.colorLevel6 {
  .el-icon-arrow-right:before {
    @extend %rainfallTailArrows-Up;
  }

  .el-collapse-item__arrow.is-active::before {
    @extend %rainfallTailArrows-Down;
  }
}

.warningLevel1,
.warningLevel2,
.warningLevel3,
.warningLevel4 {
  .el-collapse-item__header {
    &::after {

      background: url('~@/assets/newimg/rainfallLeve0.png') top center no-repeat;
      background-size: 100% 70%;
    }
  }
}

.warningLevel1,
.warningLevel2,
.warningLevel3,
.warningLevel4 {
  .el-icon-arrow-right:before {
    @extend %rainfallTailArrows-Up;
  }

  .el-collapse-item__arrow.is-active::before {
    @extend %rainfallTailArrows-Down;
  }
}


.warningLevel1 {
  background-color: rgba(224, 22, 36, 0.2);

  .el-collapse-item__header {
    // .rightTitle span {
    //   color: #ce1f1f;
    // }

    &::after {
      @extend %message-shared;
      background: #ce1f1f;
    }
  }
}

.warningLevel2 {
  background: rgba(250, 102, 35, 0.2);

  .el-collapse-item__header {
    // .rightTitle span {
    //   color: #f0810b;
    // }

    &::after {
      @extend %message-shared;
      background: #f0810b;
    }
  }
}

.warningLevel3 {
  background: rgba(250, 200, 35, 0.2);

  .el-collapse-item__header {
    // .rightTitle span {
    //   color: #f0c90b;
    // }

    &::after {
      @extend %message-shared;
      background: #f0c90b;
    }
  }
}

.warningLevel4 {
  background: rgba(0, 162, 251, 0.21);

  .el-collapse-item__header {
    // .rightTitle span {
    //   color: #00a2fb;
    // }

    &::after {
      @extend %message-shared;
      background: #1c38a1;
    }
  }
}

.warningYbyj1 {
  color: #ce1f1f !important;
}

.warningYbyj2 {
  color: #f0810b !important;
}

.warningYbyj3 {
  color: #f0c90b;
}

.warningYbyj4 {
  color: #00a2fb;
}

%warningYy-shared {
  display: inline-block;
  font-size: 12px;
  width: 60px;
  min-height: 20px;
  line-height: 20px;
  font-weight: bold;
}

.warningYy1 {
  @extend %warningYy-shared;
  border: 1px solid #fc0000;
  color: #fc0000;
  box-shadow: inset 1px 1px 10px #fc0000;
}

.warningYy2 {
  @extend %warningYy-shared;
  border: 1px solid #f0810b;
  color: #f0810b;
  box-shadow: inset 1px 1px 10px #f0810b;
}

.warningYy3 {
  @extend %warningYy-shared;
  border: 1px solid #f0c90b;
  color: #f0c90b;
  box-shadow: inset 1px 1px 10px #f0c90b;
}

.warningYy4 {
  @extend %warningYy-shared;
  border: 1px solid #00a2fb;
  color: #00a2fb;
  box-shadow: inset 1px 1px 10px #00a2fb;
}

.warningYyNull {
  @extend %warningYy-shared;
  border: 1px solid #808080;
  color: #ffffff;
  box-shadow: inset 1px 1px 0.625rem #808080;
}

.el-collapse-item__arrow {
  transform: none;
  float: right;
  margin-top: 12px !important;
  margin-right: 8px !important;
}

.cardBacdground {
  // background: rgba(3, 34, 55, 0.39);
  opacity: 0.37;
}

.cardCurBacdground {
  // background: rgba(3, 34, 55, 0.39);
}

.noData {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: url(../newimg/notAvailableData.png)  no-repeat;
  background-position: center 85%;
  background-size: auto;
  padding-top: 85%;
}

.collapse_table {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 15%;

  >ul li {
    cursor: pointer;
    width: 100%;
    padding: 8px 10px 6px;
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0;
    position: relative;
    box-sizing: border-box;
    background: url('../uemap/k1.png') no-repeat;
    background-size: 100% 100%;

    p {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #D1E8ED;
      padding: 5px 6px;
      margin: 0;
      img{
        position: relative;
        top: -1px;
      }
      span {
        font-size: 14px;
        font-family: 'Number';
        color: #fff;
      }
    }
  }

  >ul .activeList,
  >ul li:hover {
    background: url('../uemap/k11.png') no-repeat;
    background-size: 100% 100%;
  }
}

.RightCardTitle {
  background: url('~@/assets/imgNew/littletitle_icon.png') no-repeat;
  background-size: 100% 60%;
  background-position-y: bottom;
  //font-size: 16px;
  line-height: 30px;
  height: 40px;
  color: #fff;
  // text-indent: 24px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}

.dialog_info_header {
  height: 30px;
  background-size: 100%;
  line-height: 20px;
  color: #fff;

  .right_dialog_close {
    display: block;
    width: 30px;
    height: 30px;
    float: right;
    cursor: pointer;
  }
}

.el-dialog__header {
  display: none;
}

.el-dialog__body {
  padding: 5px 10px;
  background-color: rgba(9, 6, 58, 0.93);
  box-shadow: 0 0 0 1px #2e4378, inset 0 0 10px #31467d;
}

.el-menu--horizontal>.el-menu-item {
  height: 45px;
  line-height: 45px;
  padding: 0 5px;
  font-size: 12px;

  i {
    color: #fff;
  }
}

.el-menu--horizontal>.is-active {
  background-color: #12448f !important;
  color: #fff !important;
  border-bottom: none !important;
}

.el-radio__inner,
.el-input__inner,
.el-range-editor .el-range-input {
  background: #8799b400;
  border-color: #8799b4;
  letter-spacing: -1px;
  color: #fff; // #aec0db !important;
}

.el-range-editor.el-input__inner {
  border: none;
}

.el-radio__input.is-checked+.el-radio__label,
.el-radio__input.is-checked+.el-radio__label {
  color: #fff;
}

.el-radio__label {
  color: #aec0db;
}

.Statistvics {
  color: #fff;
  padding: 10px 5px;
  background: url('../newimg/left_top_bg.png'),
    url('../newimg/right_top_bg.png'), url('../newimg/left_btm_bg.png'),
    url('../newimg/right_btm_bg.png');
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  background-size: 6px;
  // background-color: rgba(3, 34, 55, 0.7);
  border-radius: 5px;

  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;

    li {
      float: left;
      text-align: center;
      font-size: 14px;

      span {
        font-size: 16px;
        display: block;
        color: #fff !important;
        height: 1.5rem !important;
        line-height: 1.5rem !important;
      }

      .StatistvicsName {
        font-size: 14px;
      }

      img {
        width: 26px;
        height: auto;
      }
    }
  }
}

.map_box {
  position: relative;
  width: 100vw;
  height: 100%;
}

.box_current_x {
  height: 100%;
  position: relative;
}

.el-tabs__nav-wrap::after {
  height: 40px;
  background: #223789;
  background: -webkit-linear-gradient(to right, #161e72, #223789, #0e1c65);
  background: linear-gradient(to right, #161e72, #223789, #0e1c65);
}

.el-tabs__active-bar {
  display: none;
}

.el-tabs__header {
  margin: 0 !important;
}

.el-tabs__item.is-active {
  // background: url(@/assets/newimg/tabBg.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding: 0;
}

.el-tabs__item {
  color: #3c62b2;
  padding: 0;
  width: 100px;
  text-align: center;
}

.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

.el-tabs__content {
  height: calc(100% - 50px);
}

.rightTitle {
  position: absolute;
  right: 38px;
  color: #fff;
}

.chartsCss {
  border: 1px solid #0e5185;
  border-left: 0;
  border-right: 0;
  width: 100%;
  height: 200px;
  // border-image-source: url('~@/assets/newimg/borderLine.png');
  background: url('~@/assets/newimg/echartsBg.png') no-repeat center center;
  background-size: auto 100%;
}

.organizationContent {
  .topContent {
    .topFlex {
      display: flex;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      margin-bottom: 16px;
      text-align: center;
      justify-content: center;

      span {
        width: 82px;
        height: 32px;
        background: rgba(0, 51, 86, 0.4);
        border: 1px solid #003d67;
        border-radius: 4px 0 0 4px;
        cursor: pointer;
        line-height: 31px;
      }

      .flexOne {
        background: #0d7df5;
        border: 1px solid #003d67;
        cursor: pointer;
        line-height: 31px;
      }
    }

    .centerStyle {
      text-align: center;
      width: 170px;
      height: 30px;
      background: rgb(106 162 234 / 20%);
      border: 1px solid #74b0fc;
      border-radius: 4px;
      margin: 0 auto;
      line-height: 30px;

      .centerFont {
        width: 160px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        text-align: center;
      }
    }

    .centerLine {
      width: 1px;
      height: 10px;
      background: #74b0fc;
      margin: 0 auto;
    }

    .bottomLine {
      width: 84%;
      height: 1px;
      background: #74b0fc;
      margin-left: 8%;
    }

    .bottomConetnt {
      display: flex;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      justify-content: space-between;
      padding: 0 5px;

      .bottomFontWidth {
        max-width: 20px;
        height: 100%;
        margin: auto;
        display: flex;
        line-height: 1;
        align-items: center;
        text-align: center;
      }

      .bottomStyle {
        //height: 120px;
        height: 140px;
        padding: 0 1px;
        background: rgb(106 162 234 / 20%);
        border: 1px solid #74b0fc;
        border-radius: 4px;
      }
    }

    .verticalFlex {
      position: relative;

      .verticalLine {
        width: 1px;
        height: 8px;
        background: #74b0fc;
        margin-left: 8%;
      }

      .verticalLineRight {
        width: 1px;
        height: 8px;
        background: #74b0fc;
        position: absolute;
        right: 8%;
        top: 0;
      }
    }
  }
}

.tableBgList {
  background: rgba(24, 82, 127, 0.22);
  border: 1px solid rgba(3, 34, 55, 0.61);
}

.marlf0 {
  margin-left: 0px;
}

.listTables {
  .el-table {
    th {
      .cell {
        color: #00FEFE;
      }
    }

    .tapadlr2 {
      .cell {
        padding: 0px 5px;
      }
    }
  }

  .el-table__empty-text {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }
}

.isShowtopflg {
  .collapse_table {
    max-height: calc(100vh - $c-h);
  }
}

.FlowColorLevel7 {
  background-color: #7fd165 !important;
}

.FlowColorLevel6 {
  background-color: #309ef3 !important;
}

.FlowColorLevel5 {
  background-color: #e8e500 !important;
}

.FlowColorLevel4 {
  background-color: #f2a408 !important;
}

.FlowColorLevel3 {
  background-color: #ef3c45 !important;
}

.FlowColorLevel2 {
  background-color: #964fd2 !important;
}

.FlowColorLevel1 {
  background-color: #c93ec0 !important;
}
.collapsecont {
  color: #fff;
  .el-collapse-item__header {
    &::after {

      background: url('~@/assets/newimg/rainfallLeve0.png') top center no-repeat;
      background-size: 100% 70%;
    }
  }
}

.collapsecont {
  .el-icon-arrow-right:before {
    @extend %rainfallTailArrows-Up;
  }

  .el-collapse-item__arrow.is-active::before {
    @extend %rainfallTailArrows-Down;
  }
}

.riverColorLevel1 {
  background-color: #7fd165 !important;
}

.riverColorLevel2 {
  background-color: #309ef3 !important;
}

.riverColorLevel3 {
  background-color: #e8e500 !important;
}

.riverColorLevel4 {
  background-color: #f2a408 !important;
}

.riverColorLevel5 {
  background-color: #ef3c45 !important;
}

.riverColorLevel6 {
  background-color: #964fd2 !important;
}

.riverColorLevel7 {
  background-color: #c93ec0 !important;
}

.el-message-box {

  .el-button {
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
  }

  .el-button--primary {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
  }

}

.DlgStyle {
  width: 70% !important;
  height: 85% !important;
  left: 15%;
  top: 0%
}

.tapadlr0 {
  .cell {
    padding: 0px !important;
  }
}

.listTablesOther {
  .el-table {
    th {
      .cell {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #00FEFE;
      }
    }

    .tapadlr2 {
      .cell {
        padding: 0px 5px;
      }
    }
  }

  .el-table__empty-text {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }
}
